<template>
  <div class="flex">
    <div class="name">
      {{ props.title }}
      <a-tooltip v-if="props.content || slots.tipcontent">
        <SvgIcon name="fence-tips" class="svgtooltip" />
        <template #content>
          <slot v-if="slots.tipcontent" name="tipcontent"></slot>
          <span v-else>{{ props.content }}</span>
        </template>
      </a-tooltip>
      <span v-if="props.data" class="data-fresh">{{ props.data }}</span>
    </div>
    <slot name="amountNum"></slot>
  </div>
</template>
<script setup name="statictop">
  import { useSlots } from 'vue'

  const props = defineProps({
    title: String,
    content: String,
    data: String,
  })

  const slots = useSlots()
</script>
<style lang="less" scoped>
  .name {
    font-size: 16px;
    font-family: PingFang SC-Semibold, PingFang SC;
    font-weight: 600;
    color: #1e1e1e;
    line-height: 22px;
    padding-left: 10px;
    position: relative;
    &:before {
      content: '';
      display: inline-block;
      width: 4px;
      height: 18px;
      background: #1890ff;
      position: absolute;
      top: 2px;
      left: 0;
    }
  }
  .flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
  }
  .data-fresh {
    font-size: 12px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #86909c;
    line-height: 22px;
  }
</style>
